<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>组件的嵌套</title>
</head>

<body>

    <div id="root">


    </div>


    <script>
        const student = Vue.extend({
            name: 'Student',
            template: '<div> <h3>姓名：{{name}}</h3>\n' +
                '        <h3>年龄：{{age}}</h3></div>>',
            data() {
                return {
                    name: '赵信',
                    age: 21,
                }

            }
        })


        const school = Vue.extend({
            name: 'School',
            template: '<div> <h3>学校：{{school}}</h3>\n' +
                '        <h3>地址：{{dizhi}}</h3><student/></div>>',
            data() {
                return {
                    school: '超神学院',
                    dizhi: '扭曲丛林',
                }

            },
            components: {
                student
            }
        })
        const hello = Vue.extend({
            name: 'Hello',
            template: '<div> <h2>{{msg}}</h2></div>>',
            data() {
                return {
                    msg: '欢迎来到英雄联盟'
                }

            }
        })

        const app = Vue.extend({
            name: 'App',
            template: '<div><hello/><school/></div>>',
            components: {
                school: school,
                hello: hello
            }
        })


        new Vue({
            el: '#root',
            template: '<div><app/></div>',
            components: {
                app
            }
        })
    </script>
</body>

</html>